import { Link } from '@/src/navigation'
import { useTranslations } from 'next-intl'

interface LayoutProps {
  children: React.ReactNode
}

const Layout: React.FC<LayoutProps> = (props) => {
  const { children } = props
  const t = useTranslations('home.news')
  return (
    <section className='flex flex-col items-center bg-[#F4F5F6]'>
      <div className='h-[1.875rem] lg:h-[5.5625rem] 2xl:h-[8.34375rem]' />
      <div className='flex flex-col items-center relative w-full lg:max-w-[960px] lg:mx-auto 2xl:max-w-[1200px]'>
        {/* 标题 */}
        <div className='text-center text-[#A6C32D] font-bold text-[0.875rem] leading-[1rem] lg:text-[0.8125rem] lg:leading-[1.2rem] 2xl:text-[1.21875rem] 2xl:leading-[1.8rem]'>
          {t('title')}
        </div>
        {/* 简介 */}
        <div className='text-center font-bold text-[0.75rem] leading-[1.40625rem] lg:text-[1.4375rem] lg:leading-[1.875rem] 2xl:text-[2.15625rem] 2xl:leading-[2.8125rem]'>
          {t('desc')}
        </div>
        {/* PC 显示 More Button */}
        <Link
          href='/news'
          className='hidden lg:block absolute right-0 top-50% -translate-y-50% px-[1.0625rem] py-[0.5625rem] text-[#A6C32D] text-[0.75rem] 2xl:px-[1.59375rem] 2xl:py-[0.84375rem] 2xl:text-[1.125rem] 2xl:leading-[1.125rem] leading-[0.75rem] font-medium rounded-full border-[#A7C628] border-[1px] border-solid hover:bg-[#A7C628] hover:text-white transition-colors duration-200'
        >
          {t('more')}
        </Link>
      </div>
      <div className='h-[1.5625rem] lg:h-[1.6875rem] 2xl:h-[2.53125rem]' />
      <div className='grid grid-cols-2 px-[0.9375rem] gap-[0.9375rem] lg:grid-cols-3 lg:gap-[1rem] lg:px-0 lg:max-w-[960px] lg:mx-auto 2xl:max-w-[1200px] 2xl:gap-[1.5rem]'>
        {children}
      </div>
      <div className='h-[1.5625rem] lg:hidden' />
      <Link
        href='/news'
        className='lg:hidden px-[1.0625rem] py-[0.5625rem] text-[#A6C32D] text-[1rem] leading-[1rem] font-medium rounded-full border-[#A7C628] border-[1px] border-solid hover:bg-[#A7C628] hover:text-white transition-colors duration-200'
      >
        {t('more')}
      </Link>
      <div className='h-[1.8755rem] lg:h-[5rem] 2xl:h-[7.5rem]' />
    </section>
  )
}

export default Layout
